<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>CSS Filter - Blur 模糊效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
      }

      body {
        min-height: 100vh;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 40px;
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        padding: 40px;
      }

      .filter-item {
        text-align: center;
        background: white;
        padding: 30px;
        border-radius: 16px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        transition: transform 0.3s ease;
      }

      .filter-item:hover {
        transform: translateY(-5px);
      }

      .filter-label {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
      }

      .filter-demo {
        width: 200px;
        height: 200px;
        background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
        font-weight: bold;
      }

      .blur-none {
        filter: blur(0px);
      }

      .blur-small {
        filter: blur(2px);
      }

      .blur-medium {
        filter: blur(5px);
      }

      .blur-large {
        filter: blur(10px);
      }

      .blur-very-large {
        filter: blur(20px);
      }

      .blur-hover {
        filter: blur(0px);
        transition: filter 0.3s ease;
      }

      .blur-hover:hover {
        filter: blur(5px);
      }
    </style>
  </head>
  <body>
    <div class="filter-item">
      <div class="filter-label">无模糊 (blur: 0px)</div>
      <div class="filter-demo blur-none">清晰</div>
    </div>

    <div class="filter-item">
      <div class="filter-label">轻微模糊 (blur: 2px)</div>
      <div class="filter-demo blur-small">轻微</div>
    </div>

    <div class="filter-item">
      <div class="filter-label">中等模糊 (blur: 5px)</div>
      <div class="filter-demo blur-medium">中等</div>
    </div>

    <div class="filter-item">
      <div class="filter-label">强烈模糊 (blur: 10px)</div>
      <div class="filter-demo blur-large">强烈</div>
    </div>

    <div class="filter-item">
      <div class="filter-label">极强模糊 (blur: 20px)</div>
      <div class="filter-demo blur-very-large">极强</div>
    </div>

    <div class="filter-item">
      <div class="filter-label">悬停模糊效果</div>
      <div class="filter-demo blur-hover">悬停我</div>
    </div>
  </body>
</html>

